﻿$(function () {
    $('#col-1 .previous-button').click(function (e) {
        //Lấy khung chứa toàn bộ danh sách
        var container = $(e.target).nextAll('ul');
        //Lấy vị trí hiện tại của khung chứa
        var position = parseInt(container.css('left'));
        //Lấy chiều rộng của khung hiển thị
        var showerWidth = container.parent().outerWidth();
        //Lấy margin của item để + thêm vào lúc trượt 
        //trừ cho phần padding của khung hiển thị vì nó đệm thêm
        var margin = parseInt($('.item-list').css('margin-right')) - parseInt(container.parent().css('padding-right')) - parseInt(container.parent().css('padding-left'));
        //Kiểm tra nếu khi trượt đạt móc tối thiểu thì dừng ở mức tối thiểu
        if (position + showerWidth + margin > 0) {
            container.css('left', '0px');
        }
        else {
            container.css('left', position + showerWidth + margin + 'px');
        }
    })

    $('#col-1 .next-button').click(function (e) {
        var container = $(e.target).nextAll('ul');
        var position = parseInt(container.css('left'));
        var showerWidth = container.parent().outerWidth();
        var margin = parseInt($('.item-list').css('margin-right')) - parseInt(container.parent().css('padding-right')) - parseInt(container.parent().css('padding-left'));
        //Tính thêm móc tối đa (thay vì tối thiểu là 0 - ko tính)
        //Lấy width của khung chứa - kích thước 1 trang (kích thước show bỏ đi 2 padding)
        var minPosition = -(container.outerWidth() - showerWidth + parseInt(container.parent().css('padding-right')) + parseInt(container.parent().css('padding-left')));
        if (position - showerWidth - margin < minPosition) {
            container.css('left', minPosition + 'px');
        }
        else {
            container.css('left', position - showerWidth - margin + 'px');
        }
    })

    $(window).resize(function () {
        //Lấy width của khung chứa và item
        var containerWidth = $('.content-container').first().outerWidth() - 40;
        var itemWidth = $('.item-list').first().outerWidth();
        //Tính khoảng trống còn dư
        //Tính số item có thể hiển thị, trừ 1 vì item cuối cùng ko có margin-right
        $('.item-list').css('margin-right', ((containerWidth % itemWidth)) / ((Math.round(containerWidth / itemWidth - 0.5)) - 1) + 'px');
    })
    $(window).trigger("resize");
})